<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'
					@tap.stop="isBack">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'></text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<template v-if="type == 1">
			<view class="result_info">
				<image :src='STATIC_URL+"success.png"' mode=""></image>
				<view class="">闯关成功</view>
			</view>
			<view class="next_btn" v-if="go_page == 2" @tap.stop="postpassLevel">继续下一关</view>
			<view class="next_btn" v-if="go_page == 1" @tap.stop="successBack">返回</view>
		</template>
		
		
		<template v-if="type == 2">
			<view class="result_info">
				<image :src='STATIC_URL+"107.png"' mode=""></image>
				<view class="">闯关失败</view>
			</view>
			
			<view class="flex flex-direction align-stretch benben-flex-layout platformMessage_flex_1">
				<view class="word_tips">
					<text class="tips_1">倒计时：</text>
					<uv-count-down :time="time * 1000" format="mm:ss" @finish="timeFinish"></uv-count-down>
					<text class="tips_2">完成练习后请重新闯关</text>
				</view>
				<view class="word" v-for="(item, index) in paragraph" :key="index">
					<view class="word_item">
						<text v-for="(v, k) in item">
							<text class="word_item_text">{{v}}</text>
						</text>
						<!-- <text class="word_hide"></text>
						<text class="word_learned">between</text> -->
					</view>
				</view>

			</view>
			<!-- <view class="topic_info">
				<view class="topic_title">
					<image :src='STATIC_URL+"106.png"' mode=""></image>
					<view class="title_text">我国《领海及毗连区法》规定，中华人民共和国领海基线由中华人民共和国政府公布，采用______划定。</view>
				</view>
				<view class="topic_list">
					<view class="topic_item" v-for="(v, k) in 4">
						<image :src='STATIC_URL+"10.png"' mode=""></image>
						<view class="topic_item_text">自然基线法</view>
					</view>
				</view>
			</view> -->
			
			<view class="submit_btn">
				<view class="btn_text" @tap.stop="postpassLevel">重新闯关</view>
			</view>
		</template>
		
		<view style="height: 110rpx;" v-if="type == 2"></view>
		
		<uv-modal width="300rpx" :showCancelButton="true" :closeOnClickOverlay="false" confirmColor="#4087FD" ref="modal" title="提示" :content='content' align="center" @confirm="confirm" :textStyle="{fontSize: 20 + 'px'}"></uv-modal>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},


		data() {
			return {
				"content": "当前闯关暂未完成，确认退出吗？",
				"type": 1,  // 1成功  2失败
				"paragraph": [],  // 失败显示的单词
				"go_page": 1,  // 1是  2否(所有关卡闯关完成返回列表页)
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {type, time, go_page} = options;
			if (type !== undefined) this.type = type;
			if (time !== undefined) this.time = time;
			if (go_page !== undefined) this.go_page = go_page;
			if (this.type == 2) {
				this.paragraph = uni.getStorageSync('paragraph');
			}
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			isBack() {
				if (this.type == 1) {
					if (this.go_page == 1) {
						uni.navigateBack({
							delta: 2
						});
					} else {
						this.$refs.modal.open();
					}
				} else {
					this.$refs.modal.open();
				}
			},
			confirm() {
				this.$refs.modal.close();
				uni.navigateBack({
					delta: 2
				});
			},
			// 重新闯关
			postpassLevel() {
				uni.$emit('getContent');
				uni.navigateBack();
			},
			// 倒计时结束
			timeFinish() {
				this.postpassLevel();
			},
			successBack() {
				uni.navigateBack({
					delta: 2
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.result_info {
		padding: 126rpx 0 63rpx;
		text-align: center;
		font-size: 20rpx;
		image {
			width: 156rpx;
			height: 112rpx;
			margin-bottom: 35rpx;
		}
	}
	.next_btn {
		width: 400rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: #4087FD;
		border-radius: 34rpx;
		font-size: 25rpx;
		color: #fff;
		font-weight: 500;
		text-align: center;
		margin: 116rpx auto 0;
	}
	.topic_info {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 25rpx;
		// min-height: 640rpx;
		.topic_title {
			display: flex;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			.title_text {
				width: calc(100% - 40rpx);
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
			}
		}
		.topic_list {
			padding: 14rpx 0;
			.topic_item {
				padding: 14rpx 0 14rpx 40rpx;
				display: flex;
				image {
					width: 23rpx;
					height: 23rpx;
					margin: 14rpx 15rpx 0 0;
				}
				.topic_item_text {
					width: calc(100% - 38rpx);
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 25px;
				}
			}
		}
	}
	.submit_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 25rpx 35rpx;
		.btn_text {
			background: #4087FD;
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			color: #fff;
			font-size: 25rpx;
			font-weight: 500;
			border-radius: 34rpx;
		}
	}
	.word_tips {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1px solid #dddddd;
		.tips_1 {
			font-size: 20rpx;
			color: #333333;
		}
		.tips_2 {
			font-size: 20rpx;
			color: #999999;
			margin-left: 20rpx;
		}
	}
	.word {
		// margin: 15rpx 25rpx 0;
		// background: #fff;
		border-radius: 10rpx;
		padding: 13rpx 0;
		.word_item {
			padding: 13rpx 0;
			line-height: 30rpx;
			overflow: hidden;
			word-break: keep-all;
			.word_item_text {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #666666;
			}
			.word_learned {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #4DC777;
			}
			.word_hide {
				float: left;
				width: 110rpx;
				height: 40rpx;
				// background: #F0F6FF;
				background: indianred;
				border-radius: 5rpx;
			}
		}
	}
	.intensify {
		margin: 15rpx 0 0;
		background: #fff;
		border-radius: 10rpx;
		.intensify_title {
			padding: 20rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
			.title_content {
				width: 100%;
				font-size: 20rpx;
				font-weight: 500;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
			}
			
		}
		
	}
	
	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		margin: 0 25rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		padding: 0 25rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>